<template>
  <div id="login">
    <div class="login_img">
      <div class="login_tit">
        <div></div>
        <div>宠物服务互助平台</div>
        <div></div>
      </div>
    </div>
    <div class="login_con">
      <div class="login_form">
        <h3>登录</h3>
        <el-form :label-position="labelPosition" :model="form">
          <el-form-item>
            <el-input class="phone" prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入手机号码" >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input prefix-icon="el-icon-s-goods" placeholder="请输入密码" v-model="form.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-radio-group v-model="radio">
              
            </el-radio-group>
            <el-button class="login" round type="primary" @click="login">登陆</el-button>
          </el-form-item>
        </el-form>
        <div style="color: #11caf3;" @click="$router.push('/register')">去注册用户</div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from '@/http/user.js'
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      radio: 3,
      labelPosition: "right",
      form: {
        username: "wzp",
        password: "12345678",
      },
      // 定义data对象form，用来保存phone和code
    };
  },
  methods: {
    ...mapActions(['user/getUserInfo']),
    async login() {
      const res = await login(this.form)
      this['user/getUserInfo'](res.data)
      if (res.code === 0) {
        this.$message({
          message: "登陆成功",
          type: "success",
        });
        
        if (res.data.isAdmin === 1 ){
          this.$router.push("/admin/homePage")
        } else {
          this.$router.push("/consumer/homePage")
        }
      } else {
        this.$message({
          message: "登陆失败:" + res.message,
          type: "error",
        });
      }

    },
  },
};
</script>
<style lang="scss" scope>
body,
html {
  width: 100%;
  height: 100%;
}

#login {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  min-height: 550px;
  min-width: 1200px;

  .login_img {
    height: 100%;
    width: 60%;
    background-size: 100% 100%;
    position: absolute;
 

    /* left: 0px; */

    .login_tit {
      display: flex;
      margin-left: 200px;
      font-size: 30px;
      color: #fff;

      div:nth-child(1) {
        width: 0;
        height: 0;
        border-bottom: 50px solid #16dcb8;
        border-left: 30px solid transparent;
      }

      div:nth-child(2) {
        background: #16dcb8;
        width: 270px;
        text-align: center;
        line-height: 48px;
      }

      div:nth-child(3) {
        width: 0;
        height: 0;
        border-top: 50px solid #16dcb8;
        border-right: 30px solid transparent;
      }
    }
  }

  .login_con {
    width: 94%;
    height: 80%;
    background: #f2f3f7;
    overflow: hidden;
    background-image: url(../assets/img/login.jpg);
    background-size: cover;
    .login_form {
      width: 300px;
      float: right;
      margin-right: 200px;
      margin-top: 100px;

      h3 {
        width: 120px;
        font-size: 22px;
        color: #11caf3;
        border-bottom: 2px solid #11caf3;
        padding-bottom: 20px;
        margin-bottom: 30px;
        font-weight: normal;
      }

      h4 {
        font-size: 15px;
        color: #11caf3;
        font-weight: normal;
        padding-left: 10px;
        margin-top: -7px;
      }

      .el-input__inner {
        border-radius: 20px;
      }

      .el-button.login {
        width: 100%;
        background: #11caf3;
        margin-top: 25px;
        border: none;
      }

      .phone {
      }

      .getnum {
        width: 90px;
        font-size: 12px;
        background: #11caf3;
        padding: 12px;
        margin-left: 5px;
      }
    }
  }
}
</style>
